<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>登录注册</title>
    <script src="/js/jquery.min.js"></script>
    <link href="/css/lo.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="top">
    <div class="login-page" id="wrapper">
        <div class="form" id="login_form">
            <div class="login-form formmm">
                <label for="userName"><input id="userName" placeholder="用户名" type="text"/></label>
                <label for="password"><input id="password" placeholder="密码" type="password"/></label>
                <button id="login">登　录</button>
                <p class="message">还没有账户? <a href="#">立刻创建</a></p>
            </div>
            <div class="register-form formmm">
                <label for="r_userName"><input id="r_userName" placeholder="用户名" type="text"/></label>
                <label for="r_nickName"><input id="r_nickName" placeholder="昵称" type="text"/></label>
                <label for="r_password"><input id="r_password" placeholder="密码" type="password"/></label>
                <button id="create">创建账户</button>
                <p class="message">已经有了一个账户? <a href="#">立刻登录</a></p>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <ul class="menu_list">
        <p class="menu_head">更换主题颜色</p>
        <li><span style="background-color: #eb574d;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #eb8636;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #d4dd4c;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #76B852;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #5cf9be;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: skyblue;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #eb77d1;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #ebcde4;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #0095eb;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #ebb3a1;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #d4d3d5;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
        <li><span style="background-color: #000000;">&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
    </ul>
</div>


<script type="text/javascript">
    //特效
    $('.message a').click(function () {
        $('.formmm').animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 'slow');
    });


    $('.menu_list li').hide();
    $('.menu_head').click(function () {
        $('.menu_list li').slideToggle();
    });

    $('.footer .menu_list span').click(function () {
        $(".top").css("background-color", $(this).css("background-color"));
        $(".form button").css("background-color", $(this).css("background-color"));

    });

    //事件
    $('#create').click(function () {
        $.ajax({
            type: "Post",
            url: "/user/register",
            data: {
                userName: $("#r_userName").val(),
                nickName: $("#r_nickName").val(),
                password: $("#r_password").val()
            },
            dataType: 'json',
            success: function (data) {
                if (data.status === 200) {
                    alert("注册成功,请登录");
                    $('.formmm').animate({
                        height: 'toggle',
                        opacity: 'toggle'
                    }, 'slow');
                } else {
                    alert("注册失败:" + data.message);
                }
            },
            error: function (xhr) {
                alert("注册失败:" + xhr.responseJSON.message);
            }
        });
    });

    $('#login').click(function () {
        $.ajax({
            url: "/user/login",
            type: "Post",
            data: {
                userName: $("#userName").val(),
                password: $("#password").val()
            },
            dataType: 'json',
            success: function (data) {
                if (data.status === 200) {
                    alert("登录成功");
                    $(location).attr('href', "/community.html");
                } else {
                    alert("登录失败:" + data.message);
                }
            },
            error: function (xhr) {
                alert("登录失败:" + xhr.responseJSON.message);
            }
        });
    });

</script>
</body>
</html>
